<template>

  <div>
    <el-form label-width="60px" label-position="right">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="一四">
            <el-input v-model="name"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="嘻嘻哈">
            <el-input v-model="name"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="中国人民" label-width="70px">
            <el-select v-model="select" style="width: 100%">
              <el-option key="1" value="哈哈sddfsdfsdfsdfssdfsdfsdf"></el-option>
              <el-option key="2" value="哈哈1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-button type="primary">搜索</el-button>
        </el-col>

      </el-row>
      <el-row :gutter="10">
        <el-col :span="22">
          <el-form-item label="一四">
            <el-input v-model="name"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="2">
          <el-button type="primary">搜索</el-button>
        </el-col>

      </el-row>
    </el-form>

    <div>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-button type="success">新增</el-button>
          <el-button type="danger" :disabled="!tableSelection.length">删除</el-button>
        </el-col>
        <el-col :span="12">
          <el-button type="success">新增</el-button>
          <el-button type="danger" :disabled="!tableSelection.length">删除</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top: 5px">
        <el-col :span="12">
          <el-table :data="tableData" @selection-change="handleSelectionChange" @row-click="handleRowClick">
            <el-table-column type="selection" label="选择" width="50"></el-table-column>
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="name" label="名称" align="center"></el-table-column>
            <el-table-column prop="age" label="年龄" align="center"></el-table-column>
            <el-table-column prop="phone" label="手机号码" width="80" show-overflow-tooltip
                             align="center"></el-table-column>
            <el-table-column prop="address" label="住址" width="100" show-overflow-tooltip
                             align="center"></el-table-column>
            <el-table-column label="操作" fixed="right" align="center" width="150">
              <template slot-scope="scope">
                <el-button>详情</el-button>
                <el-button>编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin: 20px 0; text-align: right">
            <el-pagination background layout="prev,pager,next" :total="100"></el-pagination>
          </div>
        </el-col>
        <el-col :span="12">
          <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
                    @row-click="handleRowClick">
            <el-table-column type="selection" label="选择" width="50"></el-table-column>
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="name" label="名称" align="center"></el-table-column>
            <el-table-column prop="age" label="年龄" align="center"></el-table-column>
            <el-table-column prop="phone" label="手机号码" align="center" width="80"
                             show-overflow-tooltip></el-table-column>
            <el-table-column prop="address" label="住址" align="center" width="100"
                             show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" fixed="right" align="center" width="150">
              <template slot-scope="scope">
                <el-button type="text">详情</el-button>
                <el-button type="text">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin: 20px 0; text-align: right">
            <el-pagination background layout="prev,pager,next" :total="100"></el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="margin-top: 20px">
      <el-row :gutter="20" style="margin-bottom: 5px">
        <el-col :span="8">
          <el-button type="success" @click="toCreateDictionaryCategory">新增类别</el-button>
        </el-col>
        <el-col :span="16">
          <el-button type="success" @click="toCreateDictionary">新增条目</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-table ref="dictionaryCategoryTable" :data="dictionaryCategories" row-key="id"
                    :tree-props="{children: 'children'}"
                    highlight-current-row @row-click="handleDictionaryCategoryRowClick">
            <el-table-column prop="name" label="字典类别"></el-table-column>
            <el-table-column label="操作" fixed="right" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="toEditDictionaryCategory(scope.row)">编辑</el-button>
                <el-button type="text" @click="handleDeleteDictionaryCategory(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="16">
          <el-table :data="dictionaryChildrenData" row-key="id" :tree-props="{children: 'children'}"
                    highlight-current-row @row-click="handleDictionaryRowClick">
            <el-table-column prop="name" label="字典名称"></el-table-column>
            <el-table-column label="操作" fixed="right" align="center">
              <template slot-scope="scope">
                <el-button type="text" @click="toEditDictionary(scope.row)">编辑</el-button>
                <el-button type="text" @click="handleDeleteDictionary(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>

    <el-dialog title="新增字典类别" :visible.sync="createDictionaryCategoryDialogVisible">
      <el-form label-width="70px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="类别名称">
              <el-input v-model="newDictionaryCategoryName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="类别编码">
              <el-input v-model="newDictionaryCategoryCode"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="createDictionaryCategoryDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCreateDictionaryCategory">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="编辑字典类别" :visible.sync="editDictionaryCategoryDialogVisible">
      <el-form label-width="70px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="类别名称">
              <el-input v-model="editDictionaryCategoryName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="类别编码">
              <el-input v-model="editDictionaryCategoryRow.category" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDictionaryCategoryDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditDictionaryCategory">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="新增字典" :visible.sync="createDictionaryDialogVisible">
      <el-form label-width="70px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="字典上级">
              <el-cascader style="width: 100%" v-model="newDictionaryParent" :options="dictionaries"
                           :props="{ label:'name', value:'id', checkStrictly: true }" clearable>
              </el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="字典名称">
              <el-input v-model="newDictionaryName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="createDictionaryDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCreateDictionary">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="编辑字典" :visible.sync="editDictionaryDialogVisible">
      <el-form label-width="70px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="字典上级">
              <el-cascader style="width: 100%" v-model="editDictionaryRow.extNodeParentId" :options="dictionaries"
                           :props="{ label:'name', value:'id', checkStrictly: true }" disabled>
              </el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="字典名称">
              <el-input v-model="editDictionaryName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDictionaryDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditDictionary">确 定</el-button>
      </span>
    </el-dialog>

    <!--<div style="margin-top: 20px">-->
      <!--<Verify @success="verifySuccess" @error="verifyError" :type="1" :show-button="false"></Verify>-->
    <!--</div>-->

    <div style="margin-top: 20px">
      <VueCanvas height="100" width="200"></VueCanvas>
    </div>
  </div>


</template>

<script>
  import VueCanvas from '../components/VueCanvas'

  export default {
    components: {
      VueCanvas
    },
    data() {
      return {
        dictName: '',
        fullscreenLoading: false,
        name: '',
        date: '2019-06-20',
        time: '',
        select: '',
        tableData: [
          {name: '张三', age: 18, address: '湖南省 石亭镇 苏家垄村 大屋组', phone: '13380384850'},
          {name: '张三', age: 18, address: '湖南省 石亭镇 苏家垄村 大屋组', phone: '13380384850'},
          {name: '张三', age: 18, address: '湖南省 石亭镇 苏家垄村 大屋组', phone: '13380384850'}
        ],
        tableSelection: [],

        treeProps: {
          label: 'name'
        },

        dictionaries: [],

        dictionaryCategories: [],
        dictionaryParentIdWithChildrenMap: {},

        selectedDictionaryRow: {},
        createDictionaryDialogVisible: false,
        editDictionaryDialogVisible: false,
        newDictionaryParent: '',
        newDictionaryName: '',

        selectedDictionaryCategoryRow: {},
        createDictionaryCategoryDialogVisible: false,
        editDictionaryCategoryDialogVisible: false,
        newDictionaryCategoryName: '',
        newDictionaryCategoryCode: '',

        editDictionaryCategoryRow: {},
        editDictionaryCategoryName: '',

        editDictionaryRow: {},
        editDictionaryId: '',
        editDictionaryParentId: '',
        editDictionaryName: ''
      };
    },
    methods: {
      handleSelectionChange(selection) {
        this.tableSelection = selection;
      },
      handleRowClick() {
        console.log(arguments)
      },
      handleFilterNode(value, data, node) {
        console.log(arguments)
        return true;
      },
      handleDictionaryCategoryRowClick(row) {
        this.selectedDictionaryCategoryRow = row;
      },
      handleCreateDictionaryCategory() {
        this.fullscreenLoading = true;
        this.createDictionaryCategoryDialogVisible = false;
        this.$api.createDictionaryCategory({
          name: this.newDictionaryCategoryName,
          code: this.newDictionaryCategoryCode
        }).then(this.loadDictionary);
      },

      toCreateDictionaryCategory() {
        this.createDictionaryCategoryDialogVisible = true;
        this.newDictionaryCategoryName = '';
        this.newDictionaryCategoryCode = '';
      },

      toEditDictionaryCategory(row) {
        this.editDictionaryCategoryDialogVisible = true;
        this.editDictionaryCategoryRow = row;
        this.editDictionaryCategoryName = row.name;
      },

      handleDictionaryRowClick(row) {
        this.selectedDictionaryRow = row;
      },

      toCreateDictionary() {
        this.createDictionaryDialogVisible = true;
        this.newDictionaryParent = [this.selectedDictionaryCategoryRow.id];
        this.newDictionaryName = '';
      },

      handleCreateDictionary() {
        // this.fullscreenLoading = true;
        this.createDictionaryDialogVisible = false;
        this.$api.createDictionary({
          parentId: this.newDictionaryParent[this.newDictionaryParent.length - 1],
          name: this.newDictionaryName
        }).then(this.loadDictionary);

      },

      toEditDictionary(row) {
        this.editDictionaryDialogVisible = true;
        this.editDictionaryRow = row;
        this.editDictionaryName = row.name;
      },

      handleDeleteDictionary(row) {
        this.$confirm('确定删除字典条目【 ' + row.name + ' 】？', '提示', {type: 'warning'}).then(() => {
          this.$api.deleteDictionary({id: row.id}).then(this.loadDictionary);
        })
      },

      handleDeleteDictionaryCategory(row) {
        this.$confirm('确定删除字典类别【 ' + row.name + ' 】？', '提示', {type: 'warning'}).then(() => {
          this.$api.deleteDictionaryCategory({id: row.id}).then(this.loadDictionary);
        })
      },

      handleEditDictionary() {
        this.editDictionaryDialogVisible = false;
        this.$api.updateDictionary({
          id: this.editDictionaryRow.id,
          name: this.editDictionaryName
        }).then(this.loadDictionary);
      },

      handleEditDictionaryCategory() {
        this.editDictionaryCategoryDialogVisible = false;
        this.$api.updateDictionaryCategory({
          id: this.editDictionaryCategoryRow.id,
          name: this.editDictionaryCategoryName
        }).then(this.loadDictionary);
      },

      loadDictionary() {
        this.$api.getDictionaries().then(data => {
          this.dictionaries = data.dictionaries;
          this.dictionaryCategories = data.categories;
          this.dictionaryParentIdWithChildrenMap = data.parentIdWithChildrenMap;
          // 选中字典类别第一行
          if (this.dictionaryCategories) {
            let currentRow = this._.isEmpty(this.selectedDictionaryCategoryRow) ? this.dictionaryCategories[0] : this.selectedDictionaryCategoryRow;
            this.$refs['dictionaryCategoryTable'].setCurrentRow(currentRow);
            this.selectedDictionaryCategoryRow = currentRow;
          }
        });
      }
    },
    computed: {
      dictionaryChildrenData() {
        if (this._.isEmpty(this.selectedDictionaryCategoryRow)) {
          return [];
        }
        return this.dictionaryParentIdWithChildrenMap[this.selectedDictionaryCategoryRow['id']] || [];
      }
    },
    mounted() {
      this.loadDictionary();
    }
  }
</script>

<style scoped lang="less">
  .el-row {
    margin-bottom: 0px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    /*background: #d3dce6;*/
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    /*border-radius: 4px;*/
    /*min-height: 36px;*/
  }

  .row-bg {
    /*padding: 10px 0;*/
    /*background-color: #f9fafc;*/
  }
</style>
